<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-row :gutter="20" style="margin-bottom: 30px">
      <a-col :span="20">
        <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="startTime"></j-date>
        <span class="query-group-split-cust"></span>
        <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="endTime"></j-date>
      </a-col>
      <a-col :span="4" align="right">
        <a-button @click="getChartData" type="primary"><a-icon type="search" />查询</a-button>
      </a-col>
    </a-row>

    <div>
      <h4 style="text-align:center;margin-bottom:5px;">{{chartTitle}}</h4>
      <Radarchart v-if="flag=='radar'" ref="realChart" :dataSource="dataChart"></Radarchart>
      <Piechart v-if="flag=='pie'" ref="realChart" :dataSource="dataChart"></Piechart>
      <Areachart v-if="flag=='area'" ref="realChart" :dataSource="dataChart" :params="params"></Areachart>
    </div>
  </j-modal>
</template>

<script>

  import Radarchart from '@/views/modules/component/chart/Radarchart'
  import Piechart from '@/views/modules/component/chart/Piechart'
  import Areachart from '@/views/modules/component/chart/Areachart'
  import {getAction} from '@/api/manage'

  export default {
    name: 'SysUserChartModal',
    components: {
        Radarchart,
        Piechart,
        Areachart,
    },
    props:{
        mark:String,
        chartTitle:String,
        selectionRows:Array
    },
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        flag:this.mark,
        dataChart:[],
        startTime:'2021-05-01',
        endTime:'2021-12-01',
        selectUserNames:'',
        selectUserNums:'',
        charturl:{
            "chart":"/useinfo/useInfo/chart",
            "areachart":"/useinfo/useInfo/areachart"
        },
        params:{}
      }
    },
    methods: {
        batchFil(){
            let select = ''
            let selectNum = ''
            let selectLength = this.selectionRows.length
            for (let i = 0; i < selectLength; i++) {
                select += (this.selectionRows[i].realname+'('+this.selectionRows[i].workNo+')')
                selectNum += (this.selectionRows[i].workNo+',')
            }
            this.selectUserNames=select.substring(0,select.length-1)
            this.selectUserNums=selectNum.substring(0,selectNum.length-1)
            console.log(this.selectUserNames)
        },
        getChartData(){
            let url = this.charturl.chart;
            this.batchFil()
            let params = {
                "startTime":this.startTime,
                "endTime":this.endTime,
                "selectUserNums":this.selectUserNums
            }
            if(this.flag=="area"){
                url = this.charturl.areachart
                this.params = {
                    "startTime":this.startTime,
                    "endTime":this.endTime,
                    "selectUserNames":this.selectUserNames
                }
            }
            getAction(url,params).then(res=>{
                this.dataChart = res.result
            })
        },
      show(){
        this.getChartData()
        this.visible=true
      },
      close () {
        this.visible = false;
      },
      handleOk () {
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>